<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>

		<div class="container">
			<h2>注册表单</h2>
			<label>&nbsp;&nbsp;&nbsp;用户名：</label>
			<input type="text" name="" id="username" value="" onblur="check1()" placeholder="请输入以字母开头的用户名" /><span id="usernameText"></span><br>
			<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</label>
			<input type="password" name="" id="password" value="" onblur="check2()" placeholder="以数字和字母组成的密码6-18位" /><span id="passwordText"></span><br>
			<label>电话号码：</label>
			<input type="text" name="" id="telphone" value="" onblur="check3()" placeholder="请输入9位手机号" /><span id="telphoneText"></span><br>
			<label>&nbsp;&nbsp;qq邮箱：</label>
			<input type="text" name="" id="email" value="" onblur="check4()" placeholder="请输入qq邮箱" /><span id="emailText"></span><br>
			<input type="button" name="" id="" value="提交信息" onclick="checkTable()" />
			<input type="button" name="" id="" value="显示全部用户" onclick="show()" />
			<div>
				<span id="show"></span><br>

				<span id="showAry">
					
				</span>

			</div>

		</div>

		<script>
			function check1() {
				var userName = document.getElementById("username").value;

				//用户名
				var uPattern = /^[a-zA-z]\w{3,15}$/;

				if(uPattern.test(userName)) {
					document.getElementById("usernameText").innerHTML = "用户信息输入正确";

				} else {
					document.getElementById("usernameText").innerHTML = "用户信息输入错误";
				}

			}

			function check2() {
				var passWord = document.getElementById("password").value;

				//密码
				var mPattern = /^[a-z0-9]{6,18}$/;
				if(mPattern.test(passWord)) {
					document.getElementById("passwordText").innerHTML = "密码格式输入正确";

				} else {
					document.getElementById("passwordText").innerHTML = "密码格式输入错误";
				}

			}

			function check3() {
				var telPhone = document.getElementById("telphone").value;

				var tPattern = /^1(3|4|5|7|8)\d{9}$/;

				if(tPattern.test(telPhone)) {
					document.getElementById("telphoneText").innerHTML = "电话格式输入正确";

				} else {
					document.getElementById("telphoneText").innerHTML = "电话格式输入错误";
				}

			}

			function check4() {

				var Email = document.getElementById("email").value;
				var ePattern = /^\d{5,12}@[qQ][qQ]\.(com|cn)$/;

				if(ePattern.test(Email)) {
					document.getElementById("emailText").innerHTML = "邮箱格式输入正确";

				} else {
					document.getElementById("emailText").innerHTML = "邮箱格式输入错误";
				}

			}

			function checkTable() {
				var userName = document.getElementById("username").value;
				var passWord = document.getElementById("password").value;
				var telPhone = document.getElementById("telphone").value;
				var Email = document.getElementById("email").value;

				var myDate = new Date();
				const info = {
					userName,
					passWord,
					telPhone,
					Email,
					date: myDate.toLocaleString()
				};

				/*
				 * 将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
				 */
				localStorage.setItem(userName, JSON.stringify(info));
				if(userName == "" || passWord == "" || telPhone == "" || Email == "") {
					alert("请输入完整信息！");
				} else {

					document.getElementById("show").innerHTML = "已注册成功，注册时间：" + myDate.toLocaleString() + "用户名" + userName;

				}

			}

			function show() {

				var userName = document.getElementById("username").value;
				var passWord = document.getElementById("password").value;
				var telPhone = document.getElementById("telphone").value;
				var Email = document.getElementById("email").value;
				var myDate = new Date();

				//将json转换为对象	
				//	var data2obj = JSON.parse(localStorage.getItem(userName));
				//	localStorage.getItem(data2obj);

				var dates = "";
				for(var i = 0; i < localStorage.length; i++) {
					console.log(localStorage.getItem(localStorage.key(i)));
					
						var item = JSON.parse(localStorage.getItem(localStorage.key(i)));
						console.log(item.userName)
						dates +="用户名："+item.userName;
						dates +="密码："+item.passWord;
						dates +="手机："+item.telPhone;
						dates +="邮箱："+item.Email;
						dates +="注册时间："+item.date+"<br>";
					//dates += localStorage.getItem(localStorage.key(i)).userName;
				}

				document.getElementById("showAry").innerHTML = dates;

			}
		</script>

	</body>

</html>